<template>
	<div class="gk-layout-container">
		<div class="gk-layout-header">
			<!--工具栏-->
			<div class="toolbar" style="float:left;">
				<el-form :inline="true" :model="filters" :size="global.gSize">
					<el-form-item>
						<el-select v-model="filters.itemId" style="width: 175px;" clearable  filterable 	placeholder="物料">
							<el-option v-for="i in itemName" :key="i.id" :label="i.name"
								:value="i.id">
							</el-option>
						</el-select>
					</el-form-item>
					
					<el-form-item> <el-input v-model="filters.bName " placeholder="设备名称" /> </el-form-item>
					<el-form-item> <el-input v-model="filters.barCode " placeholder="设备编码" /> </el-form-item>
					<el-form-item>
						<kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)"  perms="wh:Detail:show" />
					</el-form-item>
				</el-form>
			</div>
			<div class="toolbar" style="float:right;padding-top:0px;padding-right:10px;">
				<el-form :inline="true" :size="global.gSize" >
					<el-form-item>
						<el-input ref="barCode"  v-model="dataForm1.barCode" @keyup.enter.native="addBarCodes" placeholder="设备编码回车后出库" /> 
					</el-form-item>
				</el-form>
			</div>
		</div>
		<!--表格内容栏-->

		<div class="gk-layout-main">
		 <my-table :data="pageResult.content"  :loading="loading" >
		
				<el-table-column :label="$t('action.desc')" width="50" header-align="center" align="center">
					<template slot-scope="scope"> {{scope.$index+1}} </template>
				</el-table-column>

				<el-table-column header-align="center" align="center"prop="itemId" label="物料名称"   key="itemId"  :formatter="itemFilter"/> 
				<el-table-column header-align="center" align="center" prop="bName" label="设备名称" key="bName" />
				<el-table-column header-align="center" align="center" prop="barCode" label="设备编码" key="barCode" > </el-table-column>
		      
				<el-table-column header-align="center" align="center" width="300" :label="$t('action.operation')">
					<template slot-scope="scope">
						<kt-button icon="fa fa-edit" label="查看" perms="wh:Detail:show"  @click="handleShow(scope.$index, scope.row)" />

					</template>
				</el-table-column>
			</my-table>
		</div>
		<!--分页栏-->
		<div class="toolbar gk-layout-footer" style="padding:10px;">
			<el-pagination layout="total, prev, pager, next, jumper" @current-change="findPage"
				:current-page="pageRequest.pageNum" :page-size="pageRequest.pageSize" :total="pageResult.totalSize"
				style="float:right;">
			</el-pagination>
		</div>


<el-dialog title="资产明细"   width="70%"  :visible.sync="dialogVisible"  :close-on-click-modal="false">
      <el-form :model="dataForm"  label-width="120px" ref="dataForm"   :size="global.gSize"   label-position="right">

	        <el-row>
			   <el-col :span="12">
					<el-form-item label="物料名称"  prop="itemId"  > 
						<el-select v-model="dataForm.itemId"    style="width:100%"  filterable>
							<el-option v-for="i in itemName" :key="i.id" :label="i.name" :value="i.id"></el-option>
						</el-select>
					</el-form-item> 
				</el-col>
			   <el-col :span="12">
					<el-form-item label="设备名称"  prop="bName">
						<el-input type="text" v-model="dataForm.bName" ></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		   <el-row>
		      <el-col :span="12">
					<el-form-item label="设备编码"  prop="barCode">
					<el-input type="text" v-model="dataForm.barCode"   ></el-input>
					</el-form-item>
				</el-col>
			   <el-col :span="12">
					<el-form-item label="设备IP"  prop="bIp">
					<el-input type="text" v-model="dataForm.bIp"   ></el-input>
					</el-form-item>
		 	   </el-col>
			</el-row>
		   <el-row>
		        <el-col :span="12">
					<el-form-item label="使用寿命"  prop="bLifeLimit">
					<el-input type="text" v-model="dataForm.bLifeLimit"   ></el-input>
					</el-form-item>
				</el-col>
			   <el-col :span="12">
					<el-form-item label="所属其他系统 "  prop="outSystem">
					<el-input type="text" v-model="dataForm.BOutSystem"   ></el-input>
					</el-form-item>	   
				</el-col>
			</el-row>
		   <el-row>  
				<el-col :span="12">
					<el-form-item label="其他系统编码"  prop="outSystemCode">
					<el-input type="text" v-model="dataForm.bOutSystemCode"   ></el-input>
					</el-form-item>
				</el-col>
			   <el-col :span="12">
					<el-form-item label="品牌"  prop="brand">
					<el-input type="text" v-model="dataForm.bBrand"   ></el-input>
					</el-form-item>	   
					
				</el-col>
		 	</el-row>
		   <el-row>   
				<el-col :span="12">
					<el-form-item label="设备型号"  prop="modelNum">
						<el-input type="text" v-model="dataForm.bModelNum"   ></el-input>
					</el-form-item>
				</el-col>
			   <el-col :span="12">
					<el-form-item label="生产日期"  prop="produceDate">
						<el-input type="text" v-model="dataForm.bProduceDate"   ></el-input>
					</el-form-item>	  
				 </el-col>
		 	</el-row>
		   <el-row>  
				<el-col :span="12">
					<el-form-item label="流水号"  prop="serialNumber">
					<el-input type="text" v-model="dataForm.bSerialNumber"   ></el-input>
					</el-form-item>
				</el-col>
			   <el-col :span="12">
					<el-form-item label="序列号"  prop="suquenceNum">
					<el-input type="text" v-model="dataForm.bSquenceNum"   >
					</el-input>
					</el-form-item>
		   	   </el-col>
		   	</el-row>
      </el-form>
   
    </el-dialog>
</div>

</template>

<script> 
import KtButton from "@/views/Core/KtButton"
import { format } from "@/utils/datetime"
import {getItemName} from "@/utils/myUtil"
import MyTable from "@/views/Core/MyTable"
	import KtDeleteButton from "@/views/Core/KtDeleteButton"
	export default {
		components: {
			KtButton,
			MyTable
		},
		data() {
			return {
				size: 'small',
				filters: {
					batchNo: '',
				},
				dataForm1:{barCode:''},
				operation:true,
				loading: false,
				dicts: this.$store.state.dict.dicts,
				dialogVisible:false,
				itemName:this.$store.state.dict.item,
				pageRequest: { pageNum: 1, pageSize: 15 },
				pageResult: {}, 
		   
				dataForm: {
					id: 0
				} 
			}
		},
		methods: {
			 
			// 获取分页数据
			findPage: function (data) {
				data = data || 1
				this.filters.pageNum = data
				this.pageRequest.pageNum = data

				this.filters.pageSize = this.pageRequest.pageSize
				this.filters.storeStatus=2;//拣选
				this.$api.coreStock.findDetailPage(this.filters).then((res) => {
					this.pageResult = res.data
				}).then(data != null ? data.callback : '')
			},
			addBarCodes:function(data){
				let barCode = this.dataForm1.barCode;
				if(barCode.length>4){
					this.$api.coreStock.stockDetailOut(this.dataForm1).then((res) => {
								this.editLoading = false
								if (res.code == 200) {
									this.$message({ message: this.$t('action.operateSucess'), type: 'success' })
										this.dataForm1.barCode="";
										this.$refs['barCode'].focus()
								} else {
									this.$message({ message: this.$t('action.operateFail') + res.msg, type: 'error' })
								}
									this.findPage();
					})
					
				}
			
				
			},
		
			
		  	
			itemFilter: function (row, column, cellValue, index) {
				 
				return getItemName(cellValue,this.itemName)
			},
			
			 
			
			
			// 显示编辑界面
			handleShow: function (params, row) {
				this.dialogVisible = true
				this.operation=false;
				this.dataForm = Object.assign({}, row)
			},
			// 时间格式化
			dateFormat: function (row, column, cellValue, index) {
				return format(row[column.property])
			}
		},
		
		mounted() {
			this.findPage();
		}
	}
</script>

<style scoped>

</style>